<template>

  <div class="app-container">

    <el-form ref="form"  label-width="120px" v-loading="loading">

<!--      <el-form-item label="类型">
        <el-radio v-model="type" label="docx">docx</el-radio>
        <el-radio v-model="type" label="pdf">pdf</el-radio>
        <el-radio v-model="type" label="zip">压缩包</el-radio>
      </el-form-item>-->

      <el-form-item label="分类">
        <el-cascader placeholder="分类"
         v-model="selectClassifyId"
         :options="classifies"
         :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="是否敏感">
        <el-radio-group v-model="is_sensitive">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="文件" v-if="selectClassifyId.length>0">
        <el-upload
          class="upload-demo"
          action="https://ctbsc.lyxinxiangyi.cn/guard/article/uploadFile?module=article"
          accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip,.rar,.jpg,.png,.jpeg,.pdf"
          :on-success="handleAvatarSuccess"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          multiple
          :limit="100"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-date-picker
          v-model="publish_at"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </el-form-item>

      <el-form-item label="上传失败文档：">
        <div v-for="(item,index) in error">{{item}}</div>
      </el-form-item>

    </el-form>

  </div>


</template>

<script>
import {getDateStr, myGet, myPost} from '@/utils/myRequest'
const urlArticleClassifyLst = '/guard/article/classify/lst'
const urlArticleAdd = '/guard/article/addBatch'
const urlArticleUpload = '/guard/article/uploadFile?module=article'
export default {

  data() {
    return {
      urlUpload:urlArticleUpload,
      loading:false,
      fileList:[],
      selectClassifyId:[],
      classifies:[],
      form:[],
      is_sensitive:'2',
      type:"docx",
      publish_at:'',
      error:[]
    };
  },
  methods:{
    handleAvatarSuccess(res, file) {
      if(res.status){
        let ext = res.data.records.ext;
        if(ext=='doc') ext='docx'
        if(ext=='ppt') ext='pptx'
        if(ext=='xls') ext='xlsx'
        this.form.push({
          //type:this.type,
          type:ext,
          file_url:res.data.records.filePath,
          title:res.data.records.originName,
          summary:res.data.records.summary,
          content:res.data.records.body,
          //up_down:1,
          //is_top:2,
          classify_id:this.selectClassifyId[this.selectClassifyId.length-1]
        })

      }else{
        this.error.push(res.msg)
      }
    },

    onSubmit(formName) {
      this.loading = true
      for (let i = 0; i < this.form.length; i++) {
        this.form[i]['publish_at'] = this.publish_at
      }
      myPost(urlArticleAdd,{articles:this.form,is_sensitive:this.is_sensitive}).then(res => {
        this.loading = false
        if (res.status) {
          this.$message.success(res.msg)
          res.data.records.forEach(item=>{
            this.error.push(item)
          })
          window.location.reload()
        }
      })
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 20 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    handleImg(res, file) {
      if(res.status){
        this.form.img_urls.push(res.data.records.filePath)
      }else{
        this.$message.error('上传失败!')
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    closeAddDialog(){
      Object.assign(this.form ,this.$options.data().form)
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePptDocx(res, file) {
      if(res.status){
        this.form.docx_url = res.data.records.filePath
      }
    }
  },


  mounted() {
    myGet(urlArticleClassifyLst).then(res=>{
      if(res.status){
        this.classifies = res.data.records
      }
    })
    this.publish_at = getDateStr(1) +" 06:00:00"
  }
}
</script>

<style >

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
